<template>
  <view class="container">
    <uni-segmented-control :current="current" :values="tabs" @clickItem="onTabClick" />

    <view v-if="current === 0" class="tab-content">
      <view class="form-item">
        <label>分店名称：</label>
        <input v-model="store.name" class="input-field" disabled />
      </view>
      <view class="form-item">
        <label>联系人：</label>
        <input v-model="store.contact" class="input-field" disabled />
      </view>
      <view class="form-item">
        <label>联系电话：</label>
        <input v-model="store.phone" class="input-field" disabled />
      </view>
      <view class="form-item">
        <label>地址：</label>
        <input v-model="store.address" class="input-field" disabled />
      </view>
    </view>

    <view v-if="current === 1" class="tab-content">
      <view class="form-item">
        <view class="left">
          <view class="form-row">
            <label>分店名称：</label>
            <input v-model="store.name" class="input-field" />
          </view>
          <view class="form-row">
            <label>联系人：</label>
            <input v-model="store.contact" class="input-field" />
          </view>
          <view class="form-row">
            <label>联系电话：</label>
            <input v-model="store.phone" class="input-field" />
          </view>
          <view class="form-row">
            <label>地址：</label>
            <input v-model="store.address" class="input-field" />
          </view>
        </view>

        <view class="right">
          <view class="upload-box" @click="uploadImage">
            <view v-if="store.image">
              <image :src="store.image" class="preview-image" />
            </view>
            <view v-else>
              <text>点击上传图片</text>
              <text>上传尺寸：640*640</text>
            </view>
          </view>
        </view>
      </view>

      <view class="button-group">
        <uni-button type="primary" size="small" @click="saveStoreInfo">保存</uni-button>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      current: 0, // 当前选中的TAB索引
      tabs: ['资料修改', '密码修改'],
      store: {
        name: '国医堂中医诊所',
        contact: '露露',
        phone: '18187458333',
        address: '',
        image: '' // 存储上传的图片
      }
    };
  },
  methods: {
    onTabClick(e) {
      if (this.current !== e.currentIndex) {
        this.current = e.currentIndex;
      }
    },
    uploadImage() {
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album', 'camera'],
        success: (res) => {
          const tempFilePath = res.tempFilePaths[0];
          this.store.image = tempFilePath;
        }
      });
    },
    saveStoreInfo() {
      // 保存店铺信息的逻辑
      uni.showToast({
        title: '资料已保存',
        icon: 'success'
      });
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #fff;
}

.uni-padding-wrap {
  padding: 0px 30px;
}

.tab-content {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.form-item {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.form-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.left, .right {
  width: 48%;
}

label {
  width: 80px;
  color: #666;
  margin-right: 10px;
}

.input-field {
  flex: 1;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  outline: none;
}

.upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 300px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
}

.preview-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

.button-group {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

uni-button {
  width: 100%;
}
</style>
